<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约页</title>
    <link rel="stylesheet" href="预约.css">
    <link rel="stylesheet" href="jquery-3.5.1.min.js">
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
              alert("提交事件!");
            }
        });
        $().ready(function() {
            $("#commentForm").validate();
        });
        </script>
</head>
<body>
    <header>
        
        <nav>
            
            <ul>
                <p>    设为首页收藏专属服务热线:
                    <a>83521111/88965555</a></p>
                <li>首页</li>
                <li>关于我们</li>
                <li>项目介绍</li>
                <li><img src="images/logo.png" alt=""></li>
                <li>三生服务</li>
                <li>新闻动态</li>
                <li>预约体验</li>
            </ul>
        </nav>
    </header>
    <section>
        <div><img src="images/pic/reserve_03.jpg" width="100%" alt=""></div>
        <div><img src="images/pic/reserve_07.png" width="100%" alt=""></div>
        <div class="a2">
            <form action="" id="commentForm">
                <p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text"  placeholder="请输入您的姓名" style="width: 222px;height: 34px;"><span class="error">这是必填</span></p>
                <p>联&nbsp;系&nbsp;方&nbsp;式:&nbsp;&nbsp;&nbsp;<input type="text" placeholder="请输入您的手机号码" style="width: 222px;height: 34px;"><span class="error">这是必填</span></p>
                <p>来&nbsp;访&nbsp;时&nbsp;间:&nbsp;&nbsp;&nbsp;<input type="text" placeholder="请输入预约体验时间" style="width: 222px;height: 34px;"><span class="error">这是必填</span></p>
                <p>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:&nbsp;&nbsp;&nbsp;<input type="text" class="a5"  style="width: 910px;height: 170px;"></p>
                <p class="a4">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text"  placeholder="请输入您的邮箱" style="width: 222px;height: 34px;"><span class="error">这是必填</span></p>
                <p class="a3">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="xin" value="男">男性<input type="radio" name="xin" value="女">女性</p>
                <input type="submit" class="a6" value="立即预约">
            </form>
        </div>
    </section>
    <footer>
        <div>
            <img src="images/images/首页_05.jpg" alt="">
        </div>
    </footer>
</body>
</html>